<!-- 开通会员 -->
<template>
	<view class="membership">
		<view class="membership-top">
			<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/kthy_bg.png" mode="widthFix"></image>
			<view class="top-main">
				<!--  头部 -->
				<view class="head">
					<view class="head-img">
						<image :src="userInfo.avatar"></image>
					</view>
					<view class="head-info">
						<view class="row">
							<view class="name">
								<button>{{ userInfo.realName}}</button>
							</view>
						</view>
						<view class="text">
							{{
								userInfo.authStatus == '1'
									? '您已开通VIP会员'
									: '您还未开通会员'
							}}
							<uni-icons type="right" size="14" color="#cacaca"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 联系客服 -->
				<view class="lxkf" @click="showPopup('official')">联系客服</view>
			</view>
		</view>
		<view class="membership-main">
			<!-- 会员时间选择 -->
			<view class="member-type-selector">
				<view class="selector-title">选择开通时间</view>
				<view class="time-cards">
					<!-- 1个月 -->
					<view
						class="time-card"
						:class="{ active: selectedTime === '1_month' }"
						@click="selectedTime = '1_month'"
					>
						<view class="radio-box">
							<view
								:class="[
									'radio',
									selectedTime === '1_month' ? 'time-checked' : '',
									!selectedTime ? 'unchecked' : ''
								]"
							>
								<uni-icons
									v-if="selectedTime === '1_month'"
									type="checkmarkempty"
									color="#fff"
									size="18"
									class="checkmark"
								/>
							</view>
						</view>
						<view class="card-content">
							<view class="time-duration">1个月</view>
							<view class="price-section">
								<view class="current-price">
									<text class="currency">￥</text>
									<text class="amount">99</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 3个月 -->
					<view
						class="time-card"
						:class="{ active: selectedTime === '3_month' }"
						@click="selectedTime = '3_month'"
					>
						<view class="recommend-tag">推荐</view>
						<view class="radio-box">
							<view
								:class="[
									'radio',
									selectedTime === '3_month' ? 'time-checked' : '',
									!selectedTime ? 'unchecked' : ''
								]"
							>
								<uni-icons
									v-if="selectedTime === '3_month'"
									type="checkmarkempty"
									color="#fff"
									size="18"
									class="checkmark"
								/>
							</view>
						</view>
						<view class="card-content">
							<view class="time-duration">3个月</view>
							<view class="price-section">
								<view class="current-price">
									<text class="currency">￥</text>
									<text class="amount">199</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 6个月 -->
					<view
						class="time-card"
						:class="{ active: selectedTime === '6_month' }"
						@click="selectedTime = '6_month'"
					>
						<view class="radio-box">
							<view
								:class="[
									'radio',
									selectedTime === '6_month' ? 'time-checked' : '',
									!selectedTime ? 'unchecked' : ''
								]"
							>
								<uni-icons
									v-if="selectedTime === '6_month'"
									type="checkmarkempty"
									color="#fff"
									size="18"
									class="checkmark"
								/>
							</view>
						</view>
						<view class="card-content">
							<view class="time-duration">6个月</view>
							<view class="price-section">
								<view class="current-price">
									<text class="currency">￥</text>
									<text class="amount">368</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 1年 -->
					<view
						class="time-card"
						:class="{ active: selectedTime === '1_year' }"
						@click="selectedTime = '1_year'"
					>
						<view class="discount-tag">最优惠</view>
						<view class="radio-box">
							<view
								:class="[
									'radio',
									selectedTime === '1_year' ? 'time-checked' : '',
									!selectedTime ? 'unchecked' : ''
								]"
							>
								<uni-icons
									v-if="selectedTime === '1_year'"
									type="checkmarkempty"
									color="#fff"
									size="18"
									class="checkmark"
								/>
							</view>
						</view>
						<view class="card-content">
							<view class="time-duration">1年</view>
							<view class="price-section">
								<view class="current-price">
									<text class="currency">￥</text>
									<text class="amount">598</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view
					class="open-btn-main"
					:class="{ disabled: !selectedTime }"
					@click="selectedTime && handlePayment()"
				>
					{{
						userInfo.authStatus === '1'
							? '立即续费'
							: '立即开通'
					}}
				</view>
			</view>

			<!-- 消息通知 -->
			<view class="xxtz-row">
				<view class="xxtz-row-lf">
					<uni-icons type="sound-filled" size="20" color="#E95906"></uni-icons>
				</view>
				<view class="xxtz-row-rt">
					<view class="scroll-container">
						<view class="scroll-content">
							<view v-for="(msg, index) in messages" :key="index" class="scroll-item">
								{{ msg }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 会员权益 -->
			<view class="hyqy">
				<view class="title">
					<view class="line"></view>
					<view class="text">会员权益详情</view>
					<view class="line"></view>
				</view>
				
				<!-- VIP会员权益 -->
				<view class="member-benefits vip-benefits">
					<view class="benefit-section">
						<view class="section-title">
							<uni-icons type="star-filled" size="16" color="#E5AA50"></uni-icons>
							<text>超享圈会员平台权益</text>
						</view>
						<view class="benefit-content">
							<view class="benefit-item">
								<text>可以做超享圈平台所有有效产品：不限条件、不限次数获取产品进件码，实时同步更新市面上最新风口产品</text>
							</view>
							<view class="benefit-item">
								<text><text class="highlight">全产品权限：</text>解锁平台全部产品推广、操作权限，自主选择业务方向。</text>
							</view>
							<view class="benefit-item">
								<text><text class="highlight">成本折扣：</text>会员享受无成本，部分产品低成本进件。</text>
							</view>
							<view class="benefit-item">
								<text><text class="highlight">超高返佣：</text>会员享受部分产品返佣政策。</text>
							</view>
							<view class="benefit-item">
								<text><text class="highlight">进阶培训：</text>覆盖不同客群全产品深度培训，包含风控要点、高收益产品推广策略等进阶内容</text>
							</view>
							<view class="benefit-item">
								<text><text class="highlight">专属资源：</text>获取稀缺产品资源优先对接权，如高额度产品试点、优质客群推荐等</text>
							</view>
						</view>
					</view>
					
					<view class="benefit-section">
						<view class="section-title">
							<uni-icons type="person-filled" size="16" color="#E5AA50"></uni-icons>
							<text>平台服务权益</text>
						</view>
						<view class="platform-benefits">
							<view class="platform-item">
								<text>全国人脉资源共享</text>
							</view>
							<view class="platform-item">
								<text>资源广场发布与询单</text>
							</view>
							<view class="platform-item">
								<text>论坛交流</text>
							</view>
							<view class="platform-item">
								<text>服务商权益</text>
							</view>
							<view class="platform-item">
								<text>常用工具使用</text>
							</view>
						</view>
					</view>
				</view>
		    
				
				<!-- 通用规则 -->
				<view class="general-rules">
					<view class="rules-title">
						<uni-icons type="info-filled" size="16" color="#999"></uni-icons>
						<text>通用规则</text>
					</view>
					<view class="rules-content">
						<view class="rule-item">
							<text>会员费一经支付，概不退还，若因违规操作被平台封禁，权益终止</text>
						</view>
						<view class="rule-item">
							<text>若会员不按规定回成本，终止会员权益，且不退会员费</text>
						</view>
						<view class="rule-item">
							<text>平台保留调整会员权益、产品范围的权利</text>
						</view>
						<view class="rule-item">
							<text>会员应遵守平台业务规则、金融监管要求，违规推广导致的法律责任自行承担</text>
						</view>
					</view>
				</view>
			</view>

			<view class="tip">
				<image src="/static/images/smilingface.svg" mode="widthFix"></image> 此会员为线上虚拟产品，充值后不支持退款，望理解!
			</view>
		</view>
		<!-- 弹出框 -->
		<view class="popup" v-if="showPopupFlag">
			<view class="popup-mask"></view>
			<view class="popup-content" @longpress="handlePopupClick">
				<view class="top">
					<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/gfkf_bg.png" mode="widthFix">
					</image>
				</view>
				<view class="close-btn" @click="closePopup">
					<uni-icons type="closeempty" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		parseDate
	} from '@/utils/date.js';

	export default {
		data() {
			return {
				selectedTime: '',
				nonceStr: '',
				moneyType: '1',  // 固定为VIP
				messages: [
					"VIP专享：全场商品8折优惠",
					"会员专属客服24小时在线",
					"每月赠送100元优惠券",
					"会员生日当天双倍积分",
					"超享圈平台所有产品权限"
				],

				showPopupFlag: false,
				kefu: 'https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/gfkf_bg.png'
			}
		},
		mounted() {
			// 默认选择1年，无论是否已经是会员
			this.selectedTime = '1_year';
			console.log('User Info:', this.$store.state.user.userInfo);
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		methods: {
			// 获取的时间戳+选择的时间
			addSelectedTime(timestamp, memberType) {
				const date = new Date(timestamp);
				let months = 0;
				
				switch(memberType) {
					case '1_month':
						months = 1;
						break;
					case '3_month':
						months = 3;
						break;
					case '6_month':
						months = 6;
						break;
					case '1_year':
						months = 12;
						break;
					default:
						months = 12;
				}
				
				// 使用更安全的时间计算方法，避免跨年问题
				const currentMonth = date.getMonth();
				const targetMonth = currentMonth + months;
				const targetYear = date.getFullYear() + Math.floor(targetMonth / 12);
				const finalMonth = targetMonth % 12;
				
				// 创建新的日期对象，避免修改原对象
				const newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
				newDate.setFullYear(targetYear);
				newDate.setMonth(finalMonth);
				
				return newDate.getTime();
			},
			// 用户点击支付按钮
			async handlePayment() {
				if (this.userInfo.srStatus !== '1') {
					uni.showToast({
						title: '认证完成后才能开通会员',
						icon: 'none'
					});
					return;
				}
				
				try {
					const loginRes = await uni.login({ provider: 'weixin' });
					// 判断是否续费
					const isRenew = this.userInfo.authStatus === '1';
					// 2. 请求后端生成支付参数
					const requestData = {
						code: loginRes.code,
						userId: this.userInfo.guid,
						moneyType: this.moneyType, // 固定为VIP
						memberType: this.selectedTime, // 新增字段：1_month, 3_month, 6_month, 1_year
						notifyUrl: '/pages/membership/membership'
					};
					const res = await this.$api.getPay(requestData);
					
					if (!res.data) {
						throw new Error('支付参数获取失败');
					}
					
					// 3. 调起支付
					const paymentRes = await uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.timeStamp,
						package: res.data.package,
						paySign: res.data.paySign,
						appId: res.data.appId,
						signType: 'MD5',
						nonceStr: res.data.nonceStr,
					});
					
					this.moneyType = res.data.moneyType;
					this.nonceStr = res.data.nonceStr;
					
					// 4. 处理支付结果
					if (paymentRes.errMsg === 'requestPayment:ok') {
						uni.showToast({ title: '支付成功', icon: 'success' });
						
						// 使用更安全的时间计算
						const now = new Date();
						const endTime = new Date(this.addSelectedTime(now.getTime(), this.selectedTime));
						
						// 格式化英文时间 (MM/DD/YYYY HH:mm AM/PM)
						const enMonth = String(endTime.getMonth() + 1).padStart(2, '0');
						const enDay = String(endTime.getDate()).padStart(2, '0');
						const enYear = endTime.getFullYear();
						const enHours = endTime.getHours();
						const enMinutes = String(endTime.getMinutes()).padStart(2, '0');
						const enAmPm = enHours >= 12 ? 'PM' : 'AM';
						const enFormattedHours = enHours % 12 || 12;

						// 格式化中文时间 (YYYY-MM-DD HH:mm:ss)
						const cnMonth = String(endTime.getMonth() + 1).padStart(2, '0');
						const cnDay = String(endTime.getDate()).padStart(2, '0');
						const cnYear = endTime.getFullYear();
						const cnHours = String(endTime.getHours()).padStart(2, '0');
						const cnMinutes = String(endTime.getMinutes()).padStart(2, '0');
						const cnSeconds = String(endTime.getSeconds()).padStart(2, '0');

						// 判断是续费还是开通
						let authTime = '';
						let authEndTime = '';
						let authEndTimeCn = '';
						
						if (isRenew) {
							// 续费，起始时间为原结束时间
							try {
								const existingEndDate = parseDate(this.userInfo.authEndTime);
								if (isNaN(existingEndDate.getTime())) {
									// 如果解析失败，使用当前时间
									const currentDate = new Date();
									authTime = `${String(currentDate.getMonth() + 1).padStart(2, '0')}/${String(currentDate.getDate()).padStart(2, '0')}/${currentDate.getFullYear()} ${currentDate.getHours() % 12 || 12}:${String(currentDate.getMinutes()).padStart(2, '0')} ${currentDate.getHours() >= 12 ? 'PM' : 'AM'}`;
								} else {
									authTime = `${String(existingEndDate.getMonth() + 1).padStart(2, '0')}/${String(existingEndDate.getDate()).padStart(2, '0')}/${existingEndDate.getFullYear()} ${existingEndDate.getHours() % 12 || 12}:${String(existingEndDate.getMinutes()).padStart(2, '0')} ${existingEndDate.getHours() >= 12 ? 'PM' : 'AM'}`;
								}
							} catch (error) {
								console.error('解析原结束时间失败:', error);
								// 使用当前时间作为起始时间
								const currentDate = new Date();
								authTime = `${String(currentDate.getMonth() + 1).padStart(2, '0')}/${String(currentDate.getDate()).padStart(2, '0')}/${currentDate.getFullYear()} ${currentDate.getHours() % 12 || 12}:${String(currentDate.getMinutes()).padStart(2, '0')} ${currentDate.getHours() >= 12 ? 'PM' : 'AM'}`;
							}
							authEndTime = `${enMonth}/${enDay}/${enYear} ${enFormattedHours}:${enMinutes} ${enAmPm}`;
							authEndTimeCn = `${cnYear}-${cnMonth}-${cnDay}T${cnHours}:${cnMinutes}:${cnSeconds}`;
						} else {
							// 新开通，起始时间为当前时间
							authTime = `${String(now.getMonth() + 1).padStart(2, '0')}/${String(now.getDate()).padStart(2, '0')}/${now.getFullYear()} ${now.getHours() % 12 || 12}:${String(now.getMinutes()).padStart(2, '0')} ${now.getHours() >= 12 ? 'PM' : 'AM'}`;
							authEndTime = `${enMonth}/${enDay}/${enYear} ${enFormattedHours}:${enMinutes} ${enAmPm}`;
							authEndTimeCn = `${cnYear}-${cnMonth}-${cnDay}T${cnHours}:${cnMinutes}:${cnSeconds}`;
						}
						
						const updateData = {
							...this.userInfo,
							authStatus: this.moneyType, // 1为VIP
							authTime,
							authEndTime,
							authEndTimeCn
						};
						
						// 5. 更新用户信息，增加重试机制
						let updateSuccess = false;
						let retryCount = 0;
						const maxRetries = 3;
						
						while (!updateSuccess && retryCount < maxRetries) {
							try {
								const res1 = await this.$api.infoLogin(updateData);
								if (res1.succ) {
									updateSuccess = true;
									// 6. 更新订单状态
									await this.getPayUpdateInfo(this.nonceStr);
									// 7. 更新本地状态
									this.$store.dispatch('user/setUserInfo', res1.data);
									
									// 8. 延迟跳转，确保状态更新完成
									setTimeout(() => {
										uni.reLaunch({ url: '/pages/my-center/my-center' });
									}, 500);
								} else {
									throw new Error(res1.msg || '更新用户信息失败');
								}
							} catch (error) {
								retryCount++;
								console.error(`更新用户信息失败，第${retryCount}次重试:`, error);
								if (retryCount >= maxRetries) {
									uni.showToast({ 
										title: '支付成功，但状态更新失败，请联系客服', 
										icon: 'none',
										duration: 3000
									});
									// 即使更新失败，也跳转到个人中心
									setTimeout(() => {
										uni.reLaunch({ url: '/pages/my-center/my-center' });
									}, 2000);
								} else {
									// 等待1秒后重试
									await new Promise(resolve => setTimeout(resolve, 1000));
								}
							}
						}
					} else {
						uni.showToast({ title: '支付失败', icon: 'none' });
					}
				} catch (error) {
					console.error('支付处理失败:', error);
					uni.showToast({ 
						title: error.message || '支付失败，请重试', 
						icon: 'none' 
					});
				}
			},
			// 订单支付成功更改订单状态并分销
			async getPayUpdateInfo(nonceStr) {
				try {
					const requestData = {
						userId: this.userInfo.guid,
						guid: nonceStr
					}
					const res = await this.$api.getPayUpdateInfo(requestData);
					if (!res.succ) {
						console.error('更新订单状态失败:', res.msg);
					}
				} catch (error) {
					console.error('更新订单状态异常:', error);
				}
			},
			showPopup(type) {
				this.showPopupFlag = true;
			},
			closePopup() {
				this.showPopupFlag = false;
			},
			// 处理弹出框长按事件
			handlePopupClick() {
				// 预览图片，用户可以在预览界面长按识别二维码
				wx.previewImage({
					urls: [this.kefu],
					current: this.kefu
				});
			},
			formatDate(timestamp) {
				const date = parseDate(timestamp);
				const originalYear = date.getFullYear();
				date.setFullYear(originalYear + 1);
				return date.getTime();
			},
			async handlePay() {
				// ... existing code ...
				const now = new Date();
				const oneYearInMs = 365 * 24 * 60 * 60 * 1000;
				const authEndDate = new Date(now.getTime() + oneYearInMs);
				// ... existing code ...
			}
		}
	}
</script>

<style lang="less">
	.membership {
		display: flex;
		flex-direction: column;

		.membership-top {
			position: relative;

			image {
				width: 100%;
			}

			.top-main {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				padding: 60rpx 70rpx;
				box-sizing: border-box;

				.lxkf {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					padding: 15rpx 35rpx;
					background: #68686A;
					border-radius: 30rpx;
					color: #fff;
					font-size: 24rpx;
				}

				// 头部
				.head {
					display: flex;
					align-items: center;

					.head-img {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						border: 6rpx solid #fff;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.head-info {
						display: flex;
						flex-direction: column;
						margin-left: 30rpx;

						.row {
							display: flex;
							align-items: center;

							.name {
								font-size: 32rpx;
								color: #fff;
								font-weight: bold;

								button {
									background: none;
									border: none;
									outline: none;
									padding: 0;
									line-height: 1;
									color: #fff;

									&::after {
										border: none;
									}
								}
							}


						}

						.text {
							font-size: 26rpx;
							color: #cacaca;
							margin-top: 25rpx;

							.uni-icons {
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}

		.membership-main {
			margin: 0 35rpx;
			position: relative;
			top: -110rpx;

			// 会员类型选择器
			.member-type-selector {
				margin-bottom: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 40rpx 30rpx;
				box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.08);
				border: 1px solid #f0f0f0;
				
				.selector-title {
					text-align: center;
					font-size: 36rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 40rpx;
					position: relative;
					
					&::after {
						content: '';
						position: absolute;
						bottom: -15rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 80rpx;
						height: 4rpx;
						background: linear-gradient(90deg, #E5AA50, #F7D88B);
						border-radius: 2rpx;
					}
				}
				
				.time-cards {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					gap: 20rpx;
					margin-bottom: 30rpx;
					
					@media (max-width: 750rpx) {
						grid-template-columns: 1fr;
						gap: 15rpx;
					}
					
					// 添加卡片进入动画
					.time-card {
						animation: cardFadeIn 0.6s ease-out;
						
						&:nth-child(1) { animation-delay: 0.1s; }
						&:nth-child(2) { animation-delay: 0.2s; }
						&:nth-child(3) { animation-delay: 0.3s; }
						&:nth-child(4) { animation-delay: 0.4s; }
					}
					
					@keyframes cardFadeIn {
						from {
							opacity: 0;
							transform: translateY(30rpx);
						}
						to {
							opacity: 1;
							transform: translateY(0);
						}
					}
				}
				
				.time-card {
					position: relative;
					background: #FAFAFA;
					border: 2rpx solid #E0E0E0;
					border-radius: 16rpx;
					padding: 30rpx 20rpx;
					text-align: center;
					transition: all 0.3s ease;
					cursor: pointer;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					min-height: 180rpx;
					overflow: hidden;
					
					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: linear-gradient(135deg, rgba(229, 170, 80, 0.05), rgba(247, 216, 139, 0.05));
						opacity: 0;
						transition: opacity 0.3s ease;
						pointer-events: none;
					}
					
					&.active {
						border-color: #E5AA50;
						background: linear-gradient(135deg, #FFF9E6, #FFF5D6);
						box-shadow: 0 8rpx 24rpx rgba(229, 170, 80, 0.25);
						transform: translateY(-4rpx);
						
						&::before {
							opacity: 1;
						}
						
						.time-duration {
							color: #E5AA50;
							font-weight: bold;
						}
						
						.current-price {
							color: #E5AA50;
						}
						
						.radio {
							background: #E5AA50;
							border-color: #E5AA50;
							transform: scale(1.1);
						}
					}
					
					&:hover:not(.active) {
						border-color: #E5AA50;
						transform: translateY(-2rpx);
						box-shadow: 0 4rpx 12rpx rgba(229, 170, 80, 0.15);
					}
					
					.radio-box {
						position: absolute;
						top: 15rpx;
						right: 15rpx;
						z-index: 2;
						
						.radio {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							border: 2rpx solid #ccc;
							background: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							transition: all 0.3s ease;
							position: relative;
							overflow: hidden;
							
							&.time-checked {
								background: #E5AA50;
								border-color: #E5AA50;
							}
							
							&.unchecked {
								border-color: #ccc;
								background: #fff;
							}
							
							.checkmark {
								color: #fff;
								font-size: 18rpx;
								position: absolute;
								left: 50%;
								top: 50%;
								transform: translate(-50%, -50%);
							}
						}
					}
					
					.card-content {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						width: 100%;
						position: relative;
						z-index: 1;
					}
					
					.time-duration {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 15rpx;
						transition: all 0.3s ease;
					}
					
					.price-section {
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.current-price {
							display: flex;
							align-items: baseline;
							font-weight: bold;
							transition: all 0.3s ease;
							
							.currency {
								font-size: 24rpx;
								margin-right: 2rpx;
								color: inherit;
							}
							
							.amount {
								font-size: 40rpx;
								color: inherit;
							}
						}
					}
					
					// 推荐标签
					.recommend-tag {
						position: absolute;
						top: -10rpx;
						left: 50%;
						transform: translateX(-50%);
						background: linear-gradient(135deg, #E5AA50, #F7D88B);
						color: #fff;
						padding: 6rpx 20rpx;
						border-radius: 20rpx;
						font-size: 22rpx;
						font-weight: bold;
						z-index: 3;
						box-shadow: 0 2rpx 8rpx rgba(229, 170, 80, 0.3);
						letter-spacing: 1rpx;
					}
					
					// 优惠标签
					.discount-tag {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
						background: linear-gradient(135deg, #FF6B6B, #FF8E53);
						color: #fff;
						padding: 6rpx 16rpx;
						border-radius: 16rpx;
						font-size: 20rpx;
						font-weight: bold;
						transform: rotate(15deg);
						z-index: 3;
						box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
						letter-spacing: 1rpx;
					}
				}
				
				.open-btn-main {
					margin: 40rpx auto 0 auto;
					height: 88rpx;
					background: linear-gradient(93deg, #E5AA50 0%, #F7D88B 100%);
					border-radius: 14rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					align-items: center;
					justify-content: center;
					opacity: 1;
					transition: all 0.3s ease;
					box-shadow: 0 4rpx 12rpx rgba(229, 170, 80, 0.3);
					position: relative;
					overflow: hidden;
					
					&:not(.disabled) {
						animation: pulse 2s infinite;
					}
					
					&:hover:not(.disabled) {
						transform: translateY(-2rpx);
						box-shadow: 0 6rpx 16rpx rgba(229, 170, 80, 0.4);
						animation: none;
					}
					
					&.disabled {
						opacity: 0.4;
						background: #ccc;
						color: #fff;
						pointer-events: none;
						transform: none;
						box-shadow: none;
						animation: none;
					}
					
					@keyframes pulse {
						0% {
							box-shadow: 0 4rpx 12rpx rgba(229, 170, 80, 0.3);
						}
						50% {
							box-shadow: 0 4rpx 20rpx rgba(229, 170, 80, 0.5);
						}
						100% {
							box-shadow: 0 4rpx 12rpx rgba(229, 170, 80, 0.3);
						}
					}
				}
			}



			// 消息通知
			.xxtz-row {
				display: flex;
				align-items: center;
				height: 68rpx;
				margin: 30rpx 0;
				background: #EDEAD9;
				border-radius: 6rpx;

				&-lf {
					margin: 0 20rpx;
				}

				&-rt {
					flex: 1;
					margin-right: 20rpx;
					height: 48rpx;
					margin: 10rpx 0;
					overflow: hidden;
					position: relative;

					.scroll-container {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						overflow: hidden;
					}

					.scroll-content {
						animation: scroll 10s linear infinite;
					}

					.scroll-item {
						height: 68rpx;
						line-height: 68rpx;
						font-size: 28rpx;
						color: #5b412d;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					@keyframes scroll {
						0% {
							transform: translateY(0);
						}

						100% {
							transform: translateY(-100%);
						}
					}
				}
			}

			// 会员权益对比
			.hyqy {
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 1px solid #C48E22;
				padding: 30rpx 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.title {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 30rpx;

					.line {
						flex: 1;
						height: 2px;
						background: linear-gradient(90deg, #F7D88B 0%, #9F7D3D 100%);
					}

					.text {
						font-family: FZCuHeiSongS-B-GB;
						font-weight: bold;
						font-size: 36rpx;
						color: #1B1B1D;
						line-height: 62rpx;
						margin: 0 40rpx;
					}
				}

				// 会员权益卡片样式
				.member-benefits {
					width: 100%;
					margin-bottom: 40rpx;
					background: #FAFAFA;
					border-radius: 12rpx;
					padding: 30rpx;
					border: 1px solid #E8E8E8;
					
					&.vip-benefits {
						border-left: 4px solid #E5AA50;
						background: linear-gradient(135deg, #FAFAFA 0%, #FFF9E6 100%);
						.member-badge {
							background: linear-gradient(135deg, #E5AA50, #F7D88B);
						}
					}
					
					&.svip-benefits {
						border-left: 4px solid #FF6B6B;
						background: linear-gradient(135deg, #FAFAFA 0%, #FFF0F0 100%);
						.member-badge {
							background: linear-gradient(135deg, #FF6B6B, #FF8E53);
						}
					}
					
					.member-header {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 30rpx;
						padding-bottom: 20rpx;
						border-bottom: 1px solid #E8E8E8;
						
						.member-badge {
							color: #fff;
							padding: 8rpx 24rpx;
							border-radius: 20rpx;
							font-size: 28rpx;
							font-weight: bold;
							letter-spacing: 2rpx;
						}
						
						.member-price {
							font-size: 32rpx;
							font-weight: bold;
							color: #333;
						}
					}
					
					.benefit-section {
						margin-bottom: 30rpx;
						
						.section-title {
							display: flex;
							align-items: center;
							margin-bottom: 20rpx;
							font-size: 30rpx;
							font-weight: bold;
							color: #333;
							
							text {
								margin-left: 10rpx;
							}
						}
						
						.benefit-content {
							.benefit-item {
								display: flex;
								align-items: flex-start;
								margin-bottom: 15rpx;
								line-height: 1.6;
								padding: 12rpx 16rpx;
								border-radius: 8rpx;
								transition: all 0.3s ease;
								position: relative;
								
								&:hover {
									background: rgba(229, 170, 80, 0.05);
									transform: translateX(8rpx);
								}
								
								&::before {
									content: '';
									position: absolute;
									left: 0;
									top: 50%;
									transform: translateY(-50%);
									width: 4rpx;
									height: 60%;
									background: #E5AA50;
									border-radius: 2rpx;
									opacity: 0;
									transition: opacity 0.3s ease;
								}
								
								&:hover::before {
									opacity: 1;
								}
								
								text {
									font-size: 26rpx;
									color: #666;
									flex: 1;
									margin-left: 12rpx;
									
									.highlight {
										color: #E5AA50;
										font-weight: bold;
									}
								}
							}
						}
						
						.platform-benefits {
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							gap: 20rpx;
							
							.platform-item {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 20rpx 15rpx;
								background: #fff;
								border-radius: 12rpx;
								border: 1px solid #E8E8E8;
								transition: all 0.3s ease;
								position: relative;
								overflow: hidden;
								
								&:hover {
									border-color: #E5AA50;
									background: linear-gradient(135deg, #FFF9E6, #FFF5D6);
									transform: translateY(-4rpx);
									box-shadow: 0 8rpx 20rpx rgba(229, 170, 80, 0.15);
								}
								
								&::before {
									content: '';
									position: absolute;
									top: 0;
									left: -100%;
									width: 100%;
									height: 100%;
									background: linear-gradient(90deg, transparent, rgba(229, 170, 80, 0.1), transparent);
									transition: left 0.5s ease;
								}
								
								&:hover::before {
									left: 100%;
								}
								
								text {
									font-size: 24rpx;
									color: #666;
									text-align: center;
									font-weight: 500;
									transition: color 0.3s ease;
									position: relative;
									z-index: 1;
								}
								
								&:hover text {
									color: #E5AA50;
								}
							}
						}
					}
				}
				
				// SVIP特殊样式
				.svip-benefits {
					.benefit-content .benefit-item text .highlight {
						color: #FF6B6B;
					}
				}
				
				// 通用规则样式
				.general-rules {
					width: 100%;
					background: #F8F8F8;
					border-radius: 12rpx;
					padding: 30rpx;
					border: 1px solid #E0E0E0;
					
					.rules-title {
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						font-size: 28rpx;
						font-weight: bold;
						color: #999;
						
						text {
							margin-left: 10rpx;
						}
					}
					
					.rules-content {
						.rule-item {
							display: flex;
							align-items: flex-start;
							margin-bottom: 15rpx;
							line-height: 1.6;
							
							text {
								font-size: 24rpx;
								color: #999;
								flex: 1;
							}
						}
					}
				}

				.qyjzfb {
					width: 183rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Microsoft YaHei;
					font-weight: bold;
					font-size: 20rpx;
					color: #fff;
					margin-top: 30rpx;
					background: #E5AA4D;
					border-radius: 17rpx;
				}

				.menu-list {
					display: flex;
					flex-wrap: wrap;
					margin: 20rpx 0;

					.blick {
						flex: 0 0 25%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin: 25rpx 0;

						image {
							width: 84rpx;
							height: 84rpx;
						}

						text {
							color: #000;
							font-size: 22rpx;
							margin-top: 20rpx;
						}
					}
				}
			}
		}

		.tip {
			display: flex;
			align-self: center;
			justify-content: center;
			margin: 40rpx 0;
			font-size: 21rpx;
			color: #030000;
			line-height: 40rpx;
			opacity: 0.77;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

	.popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;

		.popup-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.6);
		}

		.popup-content {
			position: absolute;
			width: 80%;
			top: 43%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 10rpx;
			background: transparent;

			.top {
				width: 100%;
				display: flex;
				justify-content: center;

				image {
					width: 100%;
					object-fit: cover;
					border: 0;
					border-radius: 10rpx;
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				padding: 30rpx 30rpx;
				background: #FFEFD9;
				border-radius: 5rpx;

				.lf {
					display: flex;
					flex-direction: column;
					justify-content: center;


					.text-sys {
						font-size: 30rpx;
						color: #AC6C17;
						font-weight: bold;
						margin-bottom: 20rpx;
					}

					.text-qywx {
						font-size: 28rpx;
						color: #AC6C17;
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
						}
					}
				}

				.rt {
					display: flex;
					align-items: center;

					image {
						width: 200rpx;
						height: 200rpx;
						object-fit: cover;
					}
				}

			}

			.close-btn {
				position: absolute;
				bottom: -80rpx;
				left: 50%;
				width: 50rpx;
				height: 50rpx;
				transform: translateX(-50%);
				border: 2px solid #fff;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>